<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>德州扑克在线游戏</title>
    <link rel="stylesheet" href="/static/style.css">
</head>
<body>
    <div class="container">
        <header>
            <h1>🃏 德州扑克在线游戏</h1>
            <div class="connection-status">
                连接状态: <span id="connectionStatus" class="status-disconnected">未连接</span>
            </div>
        </header>

        <!-- 房间创建/加入界面 -->
        <div id="roomSetup" class="room-setup">
            <div class="room-config">
                <h2>游戏配置</h2>
                <div class="form-group">
                    <label for="playerName">玩家名称:</label>
                    <input type="text" id="playerName" placeholder="输入你的名字" value="玩家1">
                </div>
                <div class="form-group">
                    <label for="totalPlayers">总玩家数:</label>
                    <select id="totalPlayers">
                        <option value="2">2人</option>
                        <option value="3">3人</option>
                        <option value="4" selected>4人</option>
                        <option value="5">5人</option>
                        <option value="6">6人</option>
                    </select>
                </div>
                <div class="form-group">
                    <label for="aiPlayers">AI玩家数:</label>
                    <select id="aiPlayers">
                        <option value="1">1个AI</option>
                        <option value="2">2个AI</option>
                        <option value="3" selected>3个AI</option>
                        <option value="4">4个AI</option>
                        <option value="5">5个AI</option>
                    </select>
                </div>
                <div class="buttons">
                    <button id="joinRoomBtn" onclick="joinRoom()">加入房间</button>
                </div>
            </div>
        </div>

        <!-- 等待开始界面 -->
        <div id="waitingRoom" class="waiting-room" style="display: none;">
            <h2>等待游戏开始</h2>
            <div class="players-waiting">
                <h3>房间玩家:</h3>
                <div id="waitingPlayers"></div>
            </div>
            <div class="buttons">
                <button id="startGameBtn" onclick="startGame()">开始游戏</button>
                <button onclick="leaveRoom()">离开房间</button>
            </div>
        </div>

        <!-- 游戏主界面 -->
        <div id="gameArea" class="game-area" style="display: none;">
            <!-- 游戏信息栏 -->
            <div class="game-info">
                <div class="pot-info">
                    <span class="label">底池:</span>
                    <span id="potAmount" class="amount">0</span>
                </div>
                <div class="round-info">
                    <span class="label">轮次:</span>
                    <span id="roundName">翻牌前</span>
                </div>
                <div class="bet-info">
                    <span class="label">当前下注:</span>
                    <span id="currentBet" class="amount">0</span>
                </div>
            </div>

            <!-- 公共牌区域 -->
            <div class="community-cards">
                <h3>公共牌</h3>
                <div id="communityCards" class="cards-container">
                    <!-- 动态生成公共牌 -->
                </div>
            </div>

            <!-- 玩家列表 -->
            <div class="players-area">
                <h3>玩家状态</h3>
                <div id="playersList" class="players-list">
                    <!-- 动态生成玩家状态 -->
                </div>
            </div>

            <!-- 我的手牌 -->
            <div class="my-hand">
                <h3>我的手牌</h3>
                <div id="myCards" class="cards-container">
                    <!-- 动态生成手牌 -->
                </div>
            </div>

            <!-- 行动区域 -->
            <div class="action-area">
                <div id="actionPrompt" class="action-prompt" style="display: none;">
                    <div class="countdown">
                        <span>剩余时间: </span>
                        <span id="countdown">30</span>
                        <span>秒</span>
                    </div>
                    <div class="action-info">
                        <span id="actionInfo">轮到你行动</span>
                    </div>
                </div>

                <div id="actionButtons" class="action-buttons">
                    <button id="checkBtn" onclick="playerAction('check')" style="display: none;">过牌</button>
                    <button id="callBtn" onclick="playerAction('call')" style="display: none;">
                        跟注 <span id="callAmount"></span>
                    </button>
                    <button id="betBtn" onclick="showBetInput('bet')" style="display: none;">下注</button>
                    <button id="raiseBtn" onclick="showBetInput('raise')" style="display: none;">加注</button>
                    <button id="foldBtn" onclick="playerAction('fold')" style="display: none;">弃牌</button>
                    <button id="allinBtn" onclick="playerAction('all_in')" style="display: none;">全押</button>
                </div>

                <!-- 下注金额输入 -->
                <div id="betInput" class="bet-input" style="display: none;">
                    <div class="input-group">
                        <input type="number" id="betAmount" placeholder="输入金额" min="0">
                        <button onclick="confirmBet()">确认</button>
                        <button onclick="cancelBet()">取消</button>
                    </div>
                    <div class="bet-hints">
                        <span id="minBetHint"></span>
                    </div>
                </div>
            </div>
        </div>

        <!-- 游戏结束界面 -->
        <div id="gameEnd" class="game-end" style="display: none;">
            <h2>游戏结束</h2>
            <div id="gameResult"></div>
            <div class="buttons">
                <button onclick="location.reload()">重新开始</button>
            </div>
        </div>

        <!-- 消息日志 -->
        <div class="message-log">
            <h4>游戏日志</h4>
            <div id="messageLog" class="log-content"></div>
            <button onclick="clearLog()">清空日志</button>
        </div>
    </div>

    <script src="/static/app.js"></script>
</body>
</html>